<template>
  <view class="_pos-rel grid-bottom-box page-container" style="background-color: #F8F9FC;">
    <view class="_white-bg _pos-rel _z-index-3" >
      <AddressTimePicker ref="atp" :noClick="day_num"  :dataSiteInfo="DateTimeSite" @change="changeFilter" />
      <view class="_pad-x-15 _pad-y-20">
        <view class="grid-box">
          <view class="_flex-row-center-mid _w-max" @click="changePopupType(1)">
            <view class="_font-13">综合排序</view>
            <view class="iconfont icon-xialazhankai _mar-left-5 transition-06"
              :class="popup.type == 1 && popup.isShow ? 'rotate-180' : 'rotate-0'" style="font-size: 26rpx;"></view>
          </view>
          <view class="_flex-row-center-mid _w-max" @click="changePopupType(2)">
            <view class="_font-13">品牌</view>
            <view class="iconfont icon-xialazhankai _mar-left-5 transition-06"
              :class="popup.type == 2 && popup.isShow ? 'rotate-180' : 'rotate-0'" style="font-size: 26rpx;"></view>
          </view>
          <view class="_flex-row-center-mid _w-max" @click="changePopupType(3)">
            <view class="_font-13">价格</view>
            <view class="iconfont icon-xialazhankai _mar-left-5 transition-06"
              :class="popup.type == 3 && popup.isShow ? 'rotate-180' : 'rotate-0'" style="font-size: 26rpx;"></view>
          </view>
          <view class="_flex-row-center-mid _w-max" @click="changePopupType(4)">
            <view class="_font-13">更多筛选</view>
            <view class="iconfont icon-xialazhankai _mar-left-5 transition-06"
              :class="popup.type == 4 && popup.isShow ? 'rotate-180' : 'rotate-0'" style="font-size: 26rpx;"></view>
          </view>
        </view>
      </view>
      <!-- 弹出框 -->
      <view class="transition-06 _over-hid _pos-abs _w-max _white-bg"  :style="'height:' + popup.height + ';'">
        <!-- 排序 -->
        <view class="_pad-bottom-10" v-if="popup.type == 1">
          <view class="_pad-x-25 _pad-y-10 _flex-row-bet-mid" :class="thisForm.price_sort != item.value ? '_grey-99' : ''"
            v-for="(item, index) in car_price_sort" :key="index" @click="getScreen(item.value, 1)">
            <view class="">{{ item.label }}</view>
            <view v-if="thisForm.price_sort == item.value" class="_flex-row-center-mid">
              <!-- <view class="iconfont icon-duihao2 " style="font-size: 22rpx;"></view> -->
              <image src="https://taxi.raxan.xyz/wechat/static/images/select.png" mode="" style="width: 48rpx;height: 48rpx;" />
            </view>
          </view>
        </view>
        <!-- 品牌 -->
        <view class="_pad-x-20 _pad-x-15 _pos-rel _h-max grid-pop" v-if="popup.type == 2">
          <view class="_w-max _h-max _over-hid brand-filter">
            <scroll-view class="b_filter_left" scroll-y='true'>
              <view
                @click="car_brand_tree_index = index"
                :key="item.id"
                class="brand_nav" :class="{'brand_nav_active': index === car_brand_tree_index}"
                v-for="(item, index) in car_brand_tree">
                <view class="branc_active_icon" v-if="index === car_brand_tree_index"></view>
                {{ item.brand_name }}
              </view>
            </scroll-view>
            <scroll-view class="b_filter_right" scroll-y='true'>
              <view class="brand_item" :key="item.id" v-for="(item, subIndex) in car_brand_tree[car_brand_tree_index].children" @click="getScreen(subIndex, 2)">
                {{ item.brand_name }}
                <image v-if="item.check === true" src="https://taxi.raxan.xyz/wechat/static/images/select.png" mode="" style="width: 48rpx;height: 48rpx;" />
              </view>
            </scroll-view>
          </view>
          <view class="popup-btm">
            <view class="btm-item" @click="reset(1)">重置</view>
            <view class="btm-item btm-item-primary" @click="confirm()">确定</view>
          </view>
        </view>
        <!-- 价格区间 -->
        <view class="_pad-x-20 _pad-x-15 _pos-rel _h-max grid-pop" v-if="popup.type == 3">
          <scroll-view class="_w-max _h-max _over-hid" style="height: 476rpx;"scroll-y='true'>
            <view class="config-row">
              <view class="row-title">租金</view>
              <view class="row-content">
                <view :class="{ 'config-item-active': thisForm.price_index == item.index }" class="config-item"
                  @click="getScreen(index, 3)" v-for="(item, index) in car_price" :key="index">{{ item.int1 }}-{{
                item.int2 }}</view>
              </view>
            </view>
            <view class="config-row">
              <view class="row-title" style="margin-bottom: 76rpx;">更多范围</view>
              <view class="slider-content">
                <view style="margin: 0 36rpx;position: relative;">
                  <view v-for="item in carPriceInfo.markers" :key="item.value" :style="{
                      left: `calc(${Math.ceil(item.value / carPriceInfo.max * 100)}% - 8rpx)`,
                      top: '11rpx',
                      position: 'absolute',
                      width: '16rpx',
                      height: '16rpx',
                      'border-radius': '50%',
                      backgroundColor: item.active ? '#DCDCDC' : '#008DFF' 
                    }">
                      <view style="width: 80rpx;text-align: center; font-size: 28rpx;line-height:44rpx;margin-left: -32rpx;margin-top: -56rpx;color:rgba(0, 0, 0, 0.6)">{{ item.value }}</view>
                    </view>
                </view>
                  
                <slider
                 backgroundColor="#DCDCDC"
                 :min="carPriceInfo.min"
                 :max="carPriceInfo.max"
                 :value="thisForm.max_price || 0"
                 @changing="sliderChange" activeColor="#008DFF" step="1" />
              </view>
            </view>  
          </scroll-view>
          <view class="popup-btm">
            <view class="btm-item" @click="reset(2)">重置</view>
            <view class="btm-item btm-item-primary" @click="confirm()">确定</view>
          </view>
        </view>
        <!-- 更多筛选 -->
        <view class="_pad-x-20 _pad-x-15 _pos-rel _h-max grid-pop" v-if="popup.type == 4">
          <scroll-view class="_w-max _h-max _over-hid" scroll-y='true'>
          <view class="config-row">
              <view class="row-title">座位</view>
              <view class="row-content">
              <view
                class="config-item"
                @click="getScreen(item.index, 4)"
                :class="{ 'config-item-active': thisForm.seat_sum == item.index }" 
                v-for="(item, index) in car_seat_list" :key="index"
                >{{ item.label }}</view>
              </view>
            </view>
            <view class="config-row">
              <view class="row-title">档位</view>
              <view class="row-content">
              <view
                class="config-item"
                @click="getScreen(item.gear, 5)"
                :class="{ 'config-item-active': thisForm.gear == item.gear }" 
                :key="index"
                v-for="(item, index) in car_gears"
                >{{ item.label }}</view>
              </view>
            </view>
          </scroll-view>
          <view class="popup-btm">
            <view class="btm-item" @click="reset(3)">重置</view>
            <view class="btm-item btm-item-primary" @click="confirm()">确定</view>
          </view>
        </view>
      </view>
    </view>
    <view class="_w-max _h-max _flex-row _over-hid _mar-top-12">
      <!-- 分类列表 -->
      <scroll-view scroll-y='true' class="_w-90 _h-max _white-bg _over-hid" style="border-radius: 0px 24px 0px 0px;">
        <view class="_pad-y-15 _flex-col-mid _pos-rel"
          :style="item.id == thisFormType.cate_id ? 'background: #F8F9FC;' : ''" v-for="(item, index) in car_cate_ist"
          @click="changeFormType(item.id, 'cate_id')" :key="item.id">
          <view class="">{{ item.cate_name }}</view>
          <view class="_font-12" :style="item.id == thisFormType.cate_id ? 'color: #F25F61;' : 'color:#999'">￥{{ item.price
            }}{{ item.price == '暂无' ? '' : '起' }}</view>
          <view v-if="item.id == thisFormType.cate_id" class="_pos-abs _left _h-max _w-3 _top _flex-row-center-mid">
            <view class=" _w-max _h-20  theme-color-bg" style="border-radius: 1998rpx;"></view>
          </view>
        </view>
      </scroll-view>
      <scroll-view scroll-y='true' class="_flex-1 _h-max _over-hid">
        <!-- <view @click="showpricePop(item)" class="_w-max _pad-y-10 _pad-x-15 _mar-bottom-10 _white-bg" v-for="(item,index) in car_list" :key="index">
					<view class="_pad-y-10 _border-bottom _flex-row-mid">
						<image class="_w-80 _h-50 _mar-right-10" :src="item.pic" mode=""></image>
						<view class="_flex-1 _flex-row-bet-mid">
							<view>
								<view class="_font-16 _mar-bottom-5 _line-1 _w-110">{{ item.type_name }}</view>
								<view class="_font-12">{{ item.gear }}·{{ item.seat_num }}座·{{item.power}}</view>
							</view>
							<view class="_flex-row-mid car-item-tip _font-12" v-if="item.is_hot == 1">
								<image class="_w-10 _h-10 " src="/pages/car_sub/static/image/antFill.png" mode=""></image>
								<view>热销</view>
							</view>
						</view>
					</view>
					<view class="_pad-top-5 _flex-row-bet-mid">
						<view class="_flex-1 _mar-right-25 _flex-row-mid _font-11">
							<view class="_mar-right-10 _pad-x-5 _pad-y-3 sub-tip-1">限时免费取消</view>
							<view class="_pad-x-5 _pad-y-3 sub-tip-2">上门送取车</view>
						</view>
						<view >
							<view class="_font-12"><text style="color: #F25F61;">￥<text class="_font-18 _b">{{ item.price }}</text></text>/天</view>
							<view class="_font-12 _grey-99" v-if="false">总价￥{{ item.total_prices }}起</view>
						</view>
					</view>
				</view> -->
        <view style="padding: 32rpx;padding-top: 0;">
          <view class="xshd" v-if="fireCount !== 0">
            <view class="xsth_text">限时特惠</view>
            <image class="xshd_bg1" src="https://taxi.raxan.xyz/wechat/static/images/hire_btf_car.png" />
            <image class="xshd_bg" src="https://taxi.raxan.xyz/wechat/static/images/hire_bg_rx.png" />
            <view class="item_box_pm" @click="() => toCarDetal(item)" v-for="item in xshd_list" :key="item.type_id">
                <view style="display: flex;align-items: center;justify-content: flex-start;">
                  <image style="width:220rpx;height:110rpx;flex: 0 0 220rpx;margin-right: 8rpx;" :src="item.pic" mode="" />
                  <view>
                    <view style="line-height: 48rpx;font-size: 28rpx;color: rgba(0, 0, 0, 0.9);font-weight: 600;">
                      {{ item.type_name }}
                    </view>
                    <view style="line-height: 40rpx;font-size: 24rpx;color: rgba(0, 0, 0, 0.6);">
                      {{ item.seat_num }}座/{{ item.door }}门/{{ item.gear }}
                    </view>
                  </view>
                </view>
                <view style="margin-top: 24rpx;margin-bottom: 26rpx; border-bottom: 1rpx solid #E7E7E7;"></view>
                <view style="display: flex;justify-content: space-between;">
                  <view style="font-size: 26rpx;">
                    日租：<text style="color: #FF5700;">{{ item.total_prices }}元</text>
                  </view>
                  <view class="btn">
                    立即租车
                  </view>
                </view>
              </view>
          </view>
          <view  v-for="item in normal_list" :key="item.type_id" class="item_box_pm" @click="() => toCarDetal(item)">
            <view style="display: flex;align-items: center;justify-content: flex-start;">
              <image style="width:220rpx;height:110rpx;flex: 0 0 220rpx;margin-right: 8rpx;" :src="item.pic" mode="" />
              <view>
                <view style="line-height: 48rpx;font-size: 28rpx;color: rgba(0, 0, 0, 0.9);font-weight: 600;">
                  {{ item.type_name }}
                </view>
                <view style="line-height: 40rpx;font-size: 24rpx;color: rgba(0, 0, 0, 0.6);">
                  {{ item.seat_num }}座/{{ item.door }}门/{{ item.gear }}
                </view>
              </view>
            </view>
            <view style="margin-top: 24rpx;margin-bottom: 26rpx; border-bottom: 1rpx solid #E7E7E7;"></view>
            <view style="display: flex;justify-content: space-between;">
             <view style="font-size: 26rpx;" v-if="!day_num">
               日租：<text style="color: #FF5700;">{{ item.total_prices }}元</text>
             </view>
             <view style="font-size: 26rpx;" v-if="day_num">
               套餐价格：<text style="color: #FF5700;">{{ item.package_amount }}元</text>
             </view>
              <view class="btn">
                立即租车
              </view>
            </view>
          </view>
      </view>

        <!-- <view class="_w-max _flex-row-center-mid _pad-bottom-40 _font-16 _pad-top-20">~没有更多了~</view> -->
      </scroll-view>
    </view>
    <!-- 价格列表遮幕 -->
    <view @click="pricePop.isShow = false" v-if="pricePop.isShow" class="_w-max _h-max _pos-fixed _left _top _z-index-4"
      @touchmove.stop style="background-color: rgba(0,0,0,0.3);"></view>
    <view class="_pos-fixed _bottom _left _w-max _white-bg transition-06 _z-index-4 grid-calendar-box"
      :style="'height:' + pricePop.price_height + ';'" style="border-radius: 48rpx 48rpx 0 0;">
      <view class="_pad-top-10 _pad-x-20 _pad-bottom-20 _border-bottom">
        <view class=" _pos-rel _flex-row-mid _w-max _pad-top-10   _font-16">
          <image class="_w-80 _h-50 _mar-right-10" :src="carShop.pic" mode=""></image>
          <view class="">
            <view class="_font-16">{{ carShop.type_name }}</view>
            <view class="_font-12">{{ carShop.gear + '·' + carShop.seat_num + '座·' + carShop.power }}</view>
          </view>
          <view class=" _pos-abs _right _top iconfont icon-guanbi _pad-10" @click="pricePop.isShow = false"></view>
        </view>
      </view>
      <scroll-view scroll-y='true' class="_w-max _h-max _over-hid ">
        <view @click="toSubOrder(item)" class="_pad-15 _white-bg _border-bottom" v-for="(item, index) in carShop.shop"
          :key="index" v-if="item.is_scope">
          <view class="_flex-row-bet-mid">
            <view>
              <view class="_font-16 _b _mar-bottom-5">{{ item.title }}
                <text class="theme-color-bg _font-14 rest" v-if="item.is_holiday">休息中</text>
              </view>
              <view class="_font-14 _grey-99 _mar-bottom-5">商家上门送取车</view>
              <view class="_font-14 _grey-99 _mar-bottom-5" v-if="item.inventory < 1">库存紧张</view>
              <view class="_flex-row-mid _font-12 _mar-bottom-15">
                <view class="_mar-right-10 _pad-x-5 _pad-y-3 sub-tip-1">限时免费取消</view>
                <view class="_pad-x-5 _pad-y-3 sub-tip-2">上门送取车</view>
              </view>
            </view>
            <view @click.stop="showCalendar(item)" class=" _pad-y-15 _font-12 _flex-row-mid theme-color">
              <view class="_mar-right-5 iconfont icon-rilitubiao  _text-center" style="font-size: 30rpx;"></view>
              <text>价格表</text>
            </view>
          </view>
          <view class="_flex-row-mid " style="justify-content: flex-end;">
            <view class="_grey-99 _font-12" v-if="false">总价￥{{ 290 }}</view>
            <view class="_font-12 _mar-left-5">
              <text style="color: #F25F61;">￥</text>
              <text class="_font-18 _b" style="color: #F25F61;">{{ item.price }}</text>/天
            </view>
            <view class="_mar-left-5 iconfont icon-xiangyou _border-circle _pad-5 theme-color-bg"
              style="font-size:18rpx;"></view>
          </view>
        </view>
        <view class="_w-max _h-40"></view>
      </scroll-view>
    </view>
    <!-- 日历遮幕 -->
    <view @click="popup.isShow = false" v-if="popup.isShow" class="_w-max _h-max _pos-fixed _left _top _z-index-2"
      @touchmove.stop style="background-color: rgba(0,0,0,0.3);"></view>
    <calendar :show="open_calendar" :data="calendar_data" :startTime="DateTimeSite.starStamp"
      :endTime="DateTimeSite.endStamp" @close="closeCalendar"></calendar>
  </view>
</template>

<script>
import calendar from '@/components/calendar.vue';
import AddressTimePicker from '@/components/AddressTimePicker.vue'
import { getCityTypeList, getAllCategory, getCarShopList, getPriceCalendar } from '@/api/car.js';
export default {
  data() {
    return {
      fireCount: 0,
      isLoading: false,
      open_calendar: false,
      calendar_data: [],
      day_num: '',
      car_brand_tree: [],
      car_brand_tree_index: 0,
      thisForm: {
        page: 1,
        limit: 9999,
        city_id: '',
        cate_id: '',
        price_sort: 0,
        brand_id: [],
        seat_sum: '',
        gear: '',
        price_index: '',
        min_price: '',
        max_price: '',
        differ_day: 0,
        differ_hour: 0,
        end_stamp: 0,
        stat_stamp: 0,
        take_latitude: '',
        take_longitude: '',
        return_latitude: '',
        return_longitude: '',
      },
      thisFormType: {
        seat_num: '',
        gear: '',
        cate_id: 0,//车辆品牌id
      },
      popup: {
        isShow: false,//是否弹窗
        height: '0px',//弹窗高度
        type: 0,//弹窗类型 1、排序 2、品牌 3、价格 4、更多筛选 
      },
      calendar: {
        isShow: false,//是否弹窗
        cale_height: '0px',//日历高度
      },
      pricePop: {
        isShow: false,//是否弹窗
        price_height: '0px',//价格列表高度
      },
      // 车辆同一类型价格列表
      car_price_list: [],
      car_list: [],// 车辆列表
      car_cate_ist: [],// 车辆分类列表
      car_price_sort: [],// 价格排序
      car_price: [],//价格筛选
      car_seat_list: [],// 座位数
      car_gears: [],//档位
      car_service: [],//服务
      //获取主页的地点、时间
      DateTimeSite: {},
      DateTime: {},
      carShop: {
        pic: '',
        type_name: '',
        gear: '',
        seat_num: '',
        power: '',
        shop: [],
      },
      day_num:''
    };
  },
  components: { calendar, AddressTimePicker },
  watch: {
    'popup.isShow': {
      handler() {
        if (!this.popup.isShow) this.popup.height = '0px';
      },
    },
    'calendar.isShow': {
      handler() {
        if (!this.calendar.isShow) this.calendar.cale_height = '0px';
      },
    },
    'pricePop.isShow': {
      handler() {
        if (!this.pricePop.isShow) this.pricePop.price_height = '0px';
      },
    },
    thisFormType: {
      handler() {
        this.car_list = [];
        this.fireCount = 0;
          uni.showLoading({ title: '正在加载' });
          this.getCityTypeList();
        },
      deep: true,
    },
  },
  onLoad(option) {
  
    // console.log(option.param);
    // console.log(option.date);
    this.day_num = option.day_num;
    // this.DateTimeSite = JSON.parse(option.param);
    this.DateTimeSite =  JSON.parse(decodeURIComponent(option.param))
    // this.DateTime = JSON.parse(option.date);
    this.DateTime  =  JSON.parse(decodeURIComponent(option.date))
      // console.log(this.DateTimeSite);
    console.log('DateTimeSite', this.DateTimeSite)
    console.log('DateTime', this.DateTime)
    this.thisForm.place_id = this.DateTimeSite.area_id;
    this.thisForm.city_id = this.DateTimeSite.city_id;
    this.thisForm.day = this.DateTimeSite.days;
    this.thisForm.differ_day = this.DateTime.differ_day;
    this.thisForm.differ_hour = this.DateTime.differ_hour;
    this.thisForm.stat_stamp = this.DateTime.starStamp;
    this.thisForm.end_stamp = this.DateTime.endStamp;
    this.thisForm.take_latitude = this.DateTimeSite.take_latitude;
    this.thisForm.take_longitude = this.DateTimeSite.take_longitude;
    this.thisForm.return_latitude = this.DateTimeSite.black_latitude;
    this.thisForm.return_longitude = this.DateTimeSite.black_longitude;
    this.$nextTick(() => {
      this.$refs.atp.setData(this.DateTimeSite)
    })
  },
  onShow() {
    uni.showLoading({ title: '正在加载' });
    this.getCateList();
    this.getCityTypeList();
  },
  computed: {
    normal_list() {
      return this.car_list.filter(it => it.is_hot != 1);
    },
    xshd_list() {
      return this.car_list.filter(it => it.is_hot == 1);
    },
    carPriceInfo() {
      let min = 0;
      let max = 0;
      let markers = [];
      this.car_price.forEach((item) => {
        markers.push(+item.int1, +item.int2);
      })
      markers = Array.from(new Set(markers)).sort((p, c) => p - c > 0 ? 1 : -1);

      min = Math.min(...markers);
      max = Math.max(...markers);

      markers =  markers.map(value => ({
        value,
        active: value >=  this.thisForm.max_price
      }))

      return {
        markers,
        min,
        max
      }
    }
  },
  methods: {
    changeFilter(option) {
      console.log(option.param);
      console.log(option.date);
      this.DateTimeSite = JSON.parse(option.param);
      this.DateTime = JSON.parse(option.date);
      console.log('DateTimeSite', this.DateTimeSite)
      console.log('DateTime', this.DateTime)
      this.thisForm.city_id = this.DateTimeSite.city_id;
      this.thisForm.day = this.DateTimeSite.days;
       
      this.thisForm.differ_day = this.DateTime.differ_day;
      this.thisForm.differ_hour = this.DateTime.differ_hour;
      this.thisForm.stat_stamp = this.DateTime.starStamp;
      
      this.thisForm.end_stamp = this.DateTime.endStamp;
      this.thisForm.take_latitude = this.DateTimeSite.take_latitude;
      this.thisForm.take_longitude = this.DateTimeSite.take_longitude;
      this.thisForm.return_latitude = this.DateTimeSite.black_latitude;
      this.thisForm.return_longitude = this.DateTimeSite.black_longitude;
      [1, 2, 3].forEach(this.reset);
      uni.showLoading({ title: '正在加载' });
      this.getCateList();
      this.getCityTypeList();
    },
    sliderChange(e) {
      const value =  e.detail.value;
      const markers = this.carPriceInfo.markers;
      this.thisForm.max_price = value;
      markers.forEach((item) => {
        if (item.value <= value) {
          this.thisForm.min_price = item.value;
        }
      })
    },
    closeCalendar() {
      this.open_calendar = false;
    },
    // 获取车型列表信息
    getCityTypeList() {
      let that = this;
      let list = [];
      that.isLoading = true;
      const extendParams = {
        is_store_take: that.DateTimeSite.is_store_take, // 	是否门店自取
        is_door_take:  that.DateTimeSite.is_door_take, // 是否上门取车
        is_free:  that.DateTimeSite.is_free,
      }
      if (this.day_num !== undefined && this.day_num !== null && this.day_num !== '') {
        extendParams.day_num = this.day_num;
      }
      console.log(this.day_num)
      getCityTypeList({
        ...that.thisForm,
        ...extendParams,
         brand_id:that.thisForm.brand_id.length?that.thisForm.brand_id.join(','):'',
      }).then((res) => {
        list = res.data.list;
        if (list.length > 0) {
          that.car_list = that.car_list.concat(list);
          let count = 0;
          that.car_list.forEach(it => {
            if (it.is_hot == 1) {
              count++
            }
          })
          that.fireCount = count;
          that.thisForm.page++;
        }
        uni.hideLoading();
        that.isLoading = false;
      }).catch((err) => {
        uni.hideLoading();
        that.isLoading = false;
        uni.showToast({ title: '车型列表获取失败', icon: 'none' })
      })
    },
    formatBrandTree(tree) {
      const objs = {}
      const roots = []
      tree.forEach(item => {
        objs[item.id] = item;
        item.children = [];
        if (item.pid === 0) roots.push(item);
      })

      tree.forEach(item => {
        if (objs[item.pid]) {
          objs[item.pid].children.push(item)
        }
      })
      return roots;

    },
    // 获取车辆分类列表
    getCateList() {
      let that = this;
      let param = {
        city_id: that.thisForm.city_id,
        take_latitude: that.DateTimeSite.take_latitude,
        take_longitude: that.DateTimeSite.take_longitude,
        return_latitude: that.DateTimeSite.black_latitude,
        return_longitude: that.DateTimeSite.black_longitude
      }

      getAllCategory(param).then((res) => {
        that.car_cate_ist = res.data.category;
        that.car_brand_tree = this.formatBrandTree(res.data.brand)
        console.log( that.car_brand_tree,'12312321')
        that.car_price_sort = res.data.price_sort;
        that.car_price = res.data.price;
        that.car_seat_list = res.data.seat;
        that.car_gears = res.data.gears;
        that.car_service = res.data.service;
      }).catch((err) => {
        console.log(err)
        uni.showToast({ title: '分类列表获取失败', icon: 'none' })
      })
    },
    // 到底部时获取车辆列表
    scrollBottom() {
      uni.showLoading({ title: '正在加载' });
      this.getCityTypeList();
    },
    // 筛选
    getScreen(val, type) {
      let that = this;
      if (type == 1) {
        that.thisForm.price_sort = val;
        that.thisForm.page = 1;
        that.car_list = [];
        that.getCityTypeList();
      } else if (type == 2) {
        // car_brand_tree[car_brand_tree_index].children
        const list = this.car_brand_tree[this.car_brand_tree_index]?.children || []
        console.log(list, this.car_brand_tree_index);
        if (list[val].check) {
          const brandids = that.thisForm.brand_id;
          const set = new Set(brandids)
          set.delete(list[val].id);
          that.thisForm.brand_id = Array.from(set);
          list[val].check = false;
        } else {
          that.thisForm.brand_id.push(list[val].id);
          list[val].check = true;
        }
      } else if (type == 3) {
        that.thisForm.price_index = that.car_price[val].index;
        that.thisForm.min_price = that.car_price[val].int1;
        that.thisForm.max_price = that.car_price[val].int2;
      } else if (type == 4) {
        that.thisForm.seat_sum = val;
      } else if (type == 5) {
        that.thisForm.gear = val;
      }
    },
    // 打开弹窗
    changePopupType(type) {
      if (this.popup.isShow) { if (this.popup.type == type) return this.popup.isShow = false; }
      this.popup.isShow = true;
      this.popup.type = type;
      if (type == 1) {
        this.popup.height = '264rpx';
      } else if (type == 2) {
        this.popup.height = '592rpx';
      } else if (type == 4) {
        this.popup.height = '45vh';
      } else { this.popup.height = '620rpx' }
    },
    // 改变thisFormType对应键名的属性
    changeFormType(data, KEY) {
      if (!KEY) return
      if (this.isLoading) return
      this.thisForm.cate_id = data;
      this.thisForm.page = 1;
      this.thisFormType[KEY] = data;
    },
    // 展示日历
    showCalendar(row) {
      uni.showLoading({ title: '加载中', mask: true })
      getPriceCalendar(row).then((res) => {
        uni.hideLoading();
        this.calendar_data = res.data;
        this.open_calendar = true;
      }).catch((err) => {
        uni.hideLoading();
        uni.showToast({ title: '日历展示失败', icon: 'none' })
      })
    },
    // 前往提交订单
    toSubOrder(row) {
      if (row.is_holiday) return uni.showToast({ title: '哎呀！门店休息中，看看别的店或者换个时间吧', icon: 'none' });
      uni.navigateTo({ url: '/pages/car_sub/order/sub_order?type_id=' + row.type_id + '&store_id=' + row.id + '&param=' + JSON.stringify(this.DateTimeSite) + '&date=' + JSON.stringify(this.DateTime) })
    },
    // 重置
    reset(type) {
      let that = this;
      if (type == 1) {
        that.thisForm.brand_id = [];
        for (let i = 0; i < that.car_brand_tree.length; i++) {
          const parent = that.car_brand_tree[i]
          parent.check = false;
          for (let j = 0; j < parent.children.length; j++) {
            parent.children[j].check = false
          }
        }
        that.thisForm.page = 1;
        that.car_list = [];
        that.getCityTypeList();
      } else if (type == 2) {
        that.thisForm.price_index = '';
        that.thisForm.min_price = '';
        that.thisForm.max_price = '';
        that.thisForm.page = 1;
        that.car_list = [];
        that.getCityTypeList();
      } else if (type == 3) {
        that.thisForm.gear = '';
        that.thisForm.seat_sum = '';
        that.thisForm.page = 1;
        that.car_list = [];
        that.getCityTypeList();
      }
    },
    // 确定
    confirm() {
      uni.showLoading({ title: '加载中...', mask: true })
      this.popup.isShow = false;
      this.thisForm.page = 1;
      this.car_list = [];
      this.fireCount = 0;
      this.getCityTypeList();
    },
    toCarDetal(data) {
      const params = {
        id: data.type_id,
        day: this.DateTime.differ_day,
        start_time: this.DateTimeSite.starStamp,
        end_time: this.DateTimeSite.endStamp,
        color_id: '',
        appearance_id: '',
        place_id: '',
        is_door_take: this.DateTimeSite.is_door_take,
        is_take_service: this.DateTimeSite.is_visit,
        take_city_id: this.DateTimeSite.city_id,
        take_place_id: this.DateTimeSite.area_id,
        take_title: this.DateTimeSite.area_name,
        take_latitude: this.DateTimeSite.take_latitude,
        take_longitude: this.DateTimeSite.take_longitude,
        return_city_id: this.DateTimeSite.black_city_id,
        return_place_id: this.DateTimeSite.black_area_id,
        return_title: this.DateTimeSite.black_area_name,
        return_latitude: this.DateTimeSite.black_latitude,
        return_longitude: this.DateTimeSite.black_longitude,
        coupon_user_id: '',
        day_num:this.day_num
      }
   
      
      uni.navigateTo({
        url: '/pages/car_sub/detail/index?params='
          + JSON.stringify(params)
          + '&date=' + JSON.stringify(this.DateTime)
          + '&timeset=' + JSON.stringify(this.DateTimeSite)
      })
    },
    // 展示价格列表
    showpricePop(data) {
      let that = this;
      that.carShop.pic = data.pic;
      that.carShop.type_name = data.type_name;
      that.carShop.gear = data.gear;
      that.carShop.seat_num = data.seat_num;
      that.carShop.power = data.power;
      let prams = {
        type_info_id: data.ti_id,			// 车型id
        city_id: that.DateTimeSite.city_id,	// 城市id
        stat_time: that.DateTime.starStamp,	// 取车时间
        end_time: that.DateTime.endStamp,	// 还车时间
        take_latitude: that.DateTimeSite.take_latitude,
        take_longitude: that.DateTimeSite.take_longitude,
        return_latitude: that.DateTimeSite.black_latitude,
        return_longitude: that.DateTimeSite.black_longitude
      }
      getCarShopList(prams).then((res) => {
        that.carShop.shop = res.data
        that.pricePop.isShow = true;
        that.pricePop.price_height = '85vh';
      })
    },
  },
}
</script>

<style scoped lang="scss">
.xshd {
  padding: 106rpx 8rpx 16rpx 8rpx;
  background: linear-gradient( 135deg, #008DFF 0%, #B5E5FF 100%);
  border-radius: 16px 16px 16px 16px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  .xsth_text {
    position: absolute;
    left: 24rpx;
    top: 20rpx;
    width: 160rpx;
    height: 48rpx;
    font-family: DingTalk JinBuTi, DingTalk JinBuTi;
    font-weight: 400;
    font-size: 40rpx;
    color: #FFFFFF;
    line-height: 48rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .xshd_bg {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    width: 100%;
    top: 42rpx;
  }
  .xshd_bg1 {
    position: absolute;
    width: 218rpx;
    height: 138rpx;
    right: 0;
    top: 0;
    z-index: 2;
  }
}
.item_box_pm {
  // position: relative;
  // z-index: 3;
  padding: 32rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  margin-bottom: 22rpx;
  &:last-child {
    margin-bottom: 0;
  }
}
.rest {
  color: #FFFFFF;
  font-weight: normal;
  border-radius: 10rpx;
  padding: 5rpx 10rpx 5rpx 10rpx;
  margin-left: 10rpx;
}
.page-container {
  /deep/ .uni-slider-thumb, .wx-slider-thumb {
    z-index: 2!important;
  }
}

.grid-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

._pad-y-8 {
  padding-top: 16rpx;
  padding-bottom: 16rpx;
}

._pad-y-9 {
  padding-top: 18rpx;
  padding-bottom: 18rpx;
}

.transition-06 {
  transition: 0.6s;
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-0 {
  transform: rotate(0deg);
}

.grid-name-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 34rpx;
}

.border-btn {
  border-radius: 200rpx;
}

.grid-pop {
  display: grid;
  grid-template-rows: 1fr auto;
}

.grid-bottom-box {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
}

._pad-y-3 {
  padding-top: 6rpx;
  padding-bottom: 6rpx;
}

.car-item-tip {
  padding: 6rpx;
  background-color: #FEEEEE;
  color: #E26769;
  border-radius: 10rpx;
  align-self: flex-start;
}

.sub-tip-1 {
  border-radius: 8rpx;
  border: 2rpx solid #3EA4DF;
  color: #3EA4DF;
}

.sub-tip-2 {
  border-radius: 8rpx;
  border: 2rpx solid #FF8962;
  color: #FF8962;
}

.grid-calendar-box {
  display: grid;
  grid-template-rows: auto 1fr;
}

.btn {
  padding: 0 16rpx;
  background: #008DFF;
  border-radius: 4rpx;
  line-height: 46rpx;
  font-size: 24rpx;
  color: #FFFFFF;
}

.brand-filter {
  width: 100vw;
  margin-left: -40rpx;
  display: flex;
  .b_filter_left {
    flex: 0 0 206rpx;
    width: 206rpx;
    height: 100%;
    background: #F3F3F3;
    .brand_nav {
      height: 108rpx;
      line-height: 44rpx;
      padding: 32rpx;
      text-align: left;
      font-size: 28rpx;
      color: rgba(0,0,0,0.9);
      position: relative;
      .branc_active_icon {
        position: absolute;
        left: 0;
        width: 6rpx;
        height: 28rpx;
        top: 40rpx;
        background-color: #008DFF;
      }
      &.brand_nav_active {
        background-color: #FFFFFF;
        color: #008DFF;
      }
    }
  }
  .b_filter_right {
    flex: 1;
    .brand_item {
      height: 108rpx;
      padding: 32rpx;
      font-size: 28rpx;
      color: rgba(0,0,0,0.9);
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
// <view class="_w-max _h-max _over-hid brand-filter">
//             <scroll-view class="b_filter_left" scroll-y='true'>
//               <view class="brand_nav" v-for="(item, index) in car_brand_tree">
//                 <view class="branc_active_icon" v-if="index === car_brand_tree_index"></view>
//                 {{ item.brand_name }}
//               </view>
//             </scroll-view>
//             <scroll-view class="b_filter_right" scroll-y='true'>
//               <view class="brand_nav" v-for="item in car_brand_tree[car_brand_tree_index].children">
//                 {{ item.brand_name }}
//               </view>
//             </scroll-view>
//           </view>
.config-row {
  margin-bottom: 16rpx;

  .row-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.9);
    line-height: 44rpx;
    text-align: left;
    margin-bottom: 24rpx;
  }

  .row-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16rpx;
    line-height: 0;
    font-size: 0;
    .config-item {
      width: 159rpx;
      flex: 0 0 159rpx;
      line-height: 68rpx;
      border-radius: 12rpx;
      background: #F3F3F3;
      text-align: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      text-align: center;
      color: rgba(0, 0, 0, 0.6);
      &.config-item-active {
        background-color: #F2F3FF;
        color: #008DFF;
      }
    }
  }
}
.popup-btm {
      display: flex;
      padding: 32rpx;
      height: 144rpx;
      background: #FFFFFF;
      border-top: 1rpx solid #E7E7E7;
      align-items: center;
      gap: 32rpx;
      margin-left: -32rpx;
      margin-right: -32rpx;
      .btm-item {
        width: 327rpx;
        flex: 0 0 327rpx;
        line-height: 80rpx;
        background: #F2F3FF;
        border-radius: 12rpx;
        color: #008DFF;
        text-align: center;
        &.btm-item-primary {
          color: #FFFFFF;
          background-color: #008DFF;
        }
      }
    }

</style>